<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_新增布局标签</title>
</head>
<body>
<!-- 新增头部标签header -->
<header class="page-header">
    <h1>尚品汇</h1>
</header>
<hr>
<!-- 新增导航标签nav 主导航 -->
<nav>
    <a href="#">首页</a>
    <a href="#">订单</a>
    <a href="#">购物车</a>
    <a href="#">我的</a>
</nav>
<!-- 主要内容 -->
<div class="page-content">
    <!-- 新增侧边栏aside标签 侧边栏导航 -->
    <aside style="float: right;">
        <nav>
            <ul>
                <li><a href="#">秒杀专区</a></li>
                <li><a href="#">会员专区</a></li>
                <li><a href="#">领取优惠券</a></li>
                <li><a href="#">品牌专区</a></li>
            </ul>
        </nav>
    </aside>
    <!-- 新增文章标签article 一般和section配合使用 -->
    <article>
        <h2>《如何一夜暴富》</h2>
        <!-- 新增段落标签 section-->
        <section>
            <h3>第一种方式：通过做梦</h3>
            <p>你要这么做梦：xxxxxxxxxxxxxxxxxxxxxxx</p>
        </section>
        <section>
            <h3>第二种方式：通过买彩票</h3>
            <p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
        </section>
        <section>
            <h3>第三种方式：通过学习前端</h3>
            <p>你要来到尚硅谷学前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
        </section>
    </article>
</div>
<hr>
<!--新增脚注标签footer-->
<footer>
    <nav>
        <a href="#">友情链接1</a>
        <a href="#">友情链接2</a>
        <a href="#">友情链接3</a>
        <a href="#">友情链接4</a>
    </nav>
</footer>
</body>
</html>